<template>
    <view>
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>
        <view class="order-item">
            <view class="order-item-head">
                <view class="order-item-time">下单时间：{{ order.create_date }}</view>
                <view class="order-item-status-div">
                    <view :class="'order-item-status order-item-status-' + order.status_class">
                        {{ order.order_status_name }}
                    </view>
                </view>
            </view>

            <view class="order-item-layer" v-for="(itemx, index) in order.items" :key="index">
                <view class="order-item-img" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">
                    <image mode="aspectFill" :src="itemx.goods_img"></image>
                </view>

                <view class="order-item-info">
                    <view class="order-item-info-title" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">{{ itemx.goods_title }}</view>
                    <view class="order-item-info-pn">
                        <view class="order-item-info-pn-price">
                            <span class="tip">¥</span>
                            {{ itemx.goods_price }}
                        </view>
                        <view class="order-item-info-pn-number">
                            <span class="tip">X</span>
                            {{ itemx.goods_number }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-info-div-price">
                <view class="order-fx">
                    <view>
                        合计：
                        <span>¥{{ order.order_total }}</span>
                    </view>
                </view>
                <view class="order-total">
                    <view>
                        共
                        <span>{{ order.goods_number }}</span>
                        件商品
                    </view>
                </view>
            </view>
            <view class="order-out">
                <view class="title">退款原因</view>
                <view class="content">{{ order.order_out.out_explain }}</view>
            </view>
        </view>
        <view class="order-item">
            <van-steps :steps="steps" :active="2" direction="vertical" active-color="#FFBB00" />
            <view class="order-item-btn" v-if="order.order_out.out_handle_status == 3">
                <view class="order-item-but-cancel" @tap="setLogistics">填写单号</view>
                <view class="order-item-but-cancel" @tap="setNoLogistics">无需物流</view>
            </view>
            <view class="order-item-btn" v-if="order.order_out.out_handle_status == 4">
                <view class="order-item-but-text" @tap="copyCode($event, { code: order.order_out.out_logistics.number })" :data-code="order.order_out.out_logistics.number">
                    {{ order.order_out.out_logistics_str }}
                    <view
                        class="order-item-code-copy"
                        @tap="copyCode($event, { code: order.order_out.out_logistics.number })"
                        :data-code="order.order_out.out_logistics.number"
                        v-if="order.order_out.out_logistics.number"
                    >
                        <image :src="imgUrl + '/imgs/user/copy.png'"></image>
                    </view>
                </view>
            </view>
            <view class="order-item-end"></view>
        </view>
        <van-popup class="invite-popup" round :show="logisticsShow" @close="onCloselogistics">
            <view class="invite-body">
                <view class="invite-title">输入物流信息</view>
                <input class="invite-intput" value="" @input="inputLogisticsName" placeholder="请输入快递公司" />
                <input class="invite-intput" value="" @input="inputLogisticsNumber" placeholder="请输入运单号" />
                <view class="invite-bottom">
                    <view class="invite-no-btn" @tap="onCloselogistics">取消</view>
                    <view class="invite-btn" @tap="onSubmitlogistics">提交</view>
                </view>
            </view>
        </van-popup>
        <view class="end"></view>
        <view class="but-submit" v-if="order.out_handle_status == 1">
            <view class="add" @tap="repealOrder">
                <span class="add-text">撤销退款</span>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';

const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber,
  
    },
    data() {
        return {
            navbarData: {
                title: '退款进度' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            order: {
                create_date: '',
                status_class: '',
                order_status_name: '',
                items: [],
                order_total: '',
                goods_number: '',

                order_out: {
                    out_explain: '',
                    out_handle_status: 0,

                    out_logistics: {
                        number: ''
                    }
                },

                out_handle_status: 0
            },
            //订单详情
            order_item_id: [],
            order_id: '',
            all_goods: {
                order_total: 0,
                goods_number: 0
            },
            out_explain: '',
            //退款说明,
            steps: [],
            logisticsShow: false,
            logistics_name: '',
            logistics_number: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var id = options.id;
        this.setData({
            order_id: id
        });
        this.orderDetail(id);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.orderDetail(this.order_id);
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        copyCode(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //复制推广码
            // console.log(e.currentTarget.dataset.code);
            const code = e.currentTarget.dataset.code;
            uni.setClipboardData({
                data: code,

                success(res) {
                    uni.getClipboardData({
                        success(res) {
                            console.log(res.data); // data
                        }
                    });
                }
            });
        },

        onSubmitlogistics(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var json = {
                type: 'yes',
                order_id: this.order_id,
                name: this.logistics_name,
                number: this.logistics_number
            };
            Api.userOrderOutLogistics(json).then((res) => {
                if (res.code == 1) {
                    uni.showToast({
                        title: '设置成功',
                        icon: 'none',
                        duration: 2000
                    });
                }

                this.setData({
                    logisticsShow: false
                });
                this.orderDetail(this.order_id);
            });
        },

        onCloselogistics(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logisticsShow: false
            });
        },

        setLogistics(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logisticsShow: true
            });
        },

        inputLogisticsName(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logistics_name: e.detail.value
            });
        },

        inputLogisticsNumber(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logistics_number: e.detail.value
            });
        },

        setNoLogistics(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var self = this;
            var json = {
                type: 'no',
                order_id: this.order_id
            };
            uni.showModal({
                title: '提示',
                content: '确认不需要物流吗？',

                success(res) {
                    if (res.confirm) {
                        Api.userOrderOutLogistics(json).then((res) => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: '设置成功',
                                    icon: 'none',
                                    duration: 2000
                                });
                            }

                            self.orderDetail(self.order_id);
                        });
                    }
                }
            });
        },

        item_select(e) {
            var index = e.currentTarget.dataset.index;
            var order = this.order;
            order.items[index].selected = !order.items[index].selected;
            var items = order.items;
            var order_ids = [];
            var order_total = 0;
            var goods_number = 0;
            items.forEach((item) => {
                if (item.selected) {
                    order_ids.push(item.id);
                    order_total += parseFloat(item.order_total);
                    goods_number += parseInt(item.goods_number);
                }
            });
            var all_goods = {
                order_total: order_total,
                goods_number: goods_number
            };
            this.setData({
                order: order,
                all_goods: all_goods,
                order_item_id: order_ids
            });
        },

        //备注输入
        inputOutExplain(e) {
            this.setData({
                out_explain: e.detail.value
            });
        },

        repealOrder(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //撤销申请退货/退款
            var json = {
                out_id: this.order.order_out.id,
                type: 'repeal'
            };
            uni.showModal({
                title: '提示',
                content: '确认要撤销退款申请吗？',

                success(res) {
                    if (res.confirm) {
                        Api.userOutOrder(json).then((res) => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: '退款申请撤销成功',
                                    icon: 'none',
                                    duration: 2000
                                });
                                setTimeout(function () {
                                    uni.navigateBack();
                                }, 2000);
                            }
                        });
                    }
                }
            });
        },

        orderDetail(id) {
            // 订单详情
            var json = {
                id: id,
                type: 'out_status'
            };
            Api.userOrderDetail(json).then((res) => {
                if (res.code == 1) {
                    var data = res.data; // console.log(data);

                    this.setData({
                        order: data,
                        steps: data.order_out.list
                    });
                } else {
                    uni.showToast({
                        title: '订单信息有误',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        goodsDetail(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            console.log('占位：函数 goodsDetail 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
